<template>
  <div class="addressBookContainer pageContainer flex-column">
    <header-tabs :tabs="tabs"></header-tabs>
    <div class="routeContent autoGrow flex-row">
      <choose-service-account
        :multiple="false"
        @serviceChange="serviceChange"
      >
        <div class="multiUpload">
          <div class="subTitle">
            多账号导入通讯录
          </div>
          <button class="layui-btn layui-btn-xs upload" @click="openDialog">上传</button>
        </div>
      </choose-service-account>
      <div class="friendList">
        <div class="subTitle">
          好友列表
        </div>
        <div class="radios">
          <input type="radio"
            name="type" value="all"
            :checked="friendType=='all'"
            @change="changeFriendType">
          <label>全部</label>
          <input type="radio"
            name="type" value="friend"
            :checked="friendType=='firend'"
            @change="changeFriendType">
          <label>好友</label>
          <input type="radio"
            name="type" value="stranger"
            :checked="friendType=='stranger'"
            @change="changeFriendType">
          <label>非好友</label>
          <input type="radio"
            name="type" value="blacklist"
            :checked="friendType=='blacklist'"
            @change="changeFriendType">
          <label>黑名单</label>
        </div>
        <search placeholder="请输入关键字" @change="search"></search>
        <div class="lebleOperate flex-row">
          <span>标签</span>
          <search placeholder="请输入关键字" :hasIcon="false" @change="searchLabel"></search>
          <button class="layui-btn layui-btn-xs">添加</button>
        </div>
        <div class="listTitle">共计{{fliteredFriends.length}}人</div>
        <div class="userList">
          <div v-for="(user, i) in fliteredFriends" :key="i">
            <user-list-item
              :showBadge="true"
              :item="user"
              :showLastMessage="false"
              currentUserWxid=""
              :showGender="false">
              <template v-slot:bottomInfo>
                <div>
                  {{user.wxid}}
                </div>
              </template>
            </user-list-item>
            <div class="userOperate">
              <button v-if="user.stranger" class="layui-btn layui-btn-xs" @click="addFriend(user)">加好友</button>
              <button v-if="!user.stranger" class="layui-btn layui-btn-xs layui-btn-danger" @click="deleteFriend(user)">删除好友</button>
              <button v-if="!user.blacklist&&!user.stranger" class="layui-btn layui-btn-xs layui-btn-warm" @click="blacklist(user)">黑名单</button>
            </div>
          </div>
        </div>
      </div>
      <div class="importAddressBookContainer autoGrow flex-column">
        <div class="subTitle">导入通讯录</div>
        <div class="desc">
          <span>EXCEL批量导入通讯录</span>
          <button class="layui-btn layui-btn-xs upload">上传
            <input type="file" accept=".xls,.xlsx" @change="uploadAddressBook">
          </button>
        </div>
        <div class="desc">
          通讯录格式为第一列表头为”姓名“，第二列表头为”手机号“，如下图
        </div>
        <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>姓名</th>
              <th>手机号</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>张三</td>
                <td>13588888888</td>
              </tr>
          </tbody>
        </table>
        <div>
          <div class="subTitle">导入通讯录预览</div>
          <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>姓名</th>
                <th>手机号</th>
              </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{item.name}}</td>
                  <td>{{item.phone}}</td>
                </tr>
            </tbody>
          </table>
        </div>
        <div class="importContainer flex-row">
          <button class="layui-btn layui-btn-sm" @click="confirmImport">一键导入</button>
        </div>
      </div>
    </div>
    <custom-dialog
      :closeDialog="()=>this.showDialog=false"
      title="多账号导入通讯录"
      wrapClass="addressBookDialog"
      v-if="showDialog">
      <div class="editForm flex-column">
        <choose-service-account :multiple="true" @serviceChange="chooseService">
        </choose-service-account>
        <div class="importEntry">
          <span>EXCEL批量导入通讯录</span>
          <button class="layui-btn layui-btn-xs upload" @click="multiUpload">
            上传
            <input type="file" accept=".xls,.xlsx" @change="uploadAddressBook">
          </button>
        </div>
        <div class="fontGrey">一次最多为一个账号导入500个通讯录好友，导入的好友将平均分配给已选择账号</div>
        <div class="submitContainer">
          <button class="layui-btn layui-btn-normal layui-btn-sm confirmImport" @click="confirmImport">
            确定
          </button>
        </div>
      </div>
    </custom-dialog>
  </div>
</template>
<script>
import HeaderTabs from '@/components/headerTabs';
import ChooseServiceAccount from '@/components/chooseServiceAccount';
import UserListItem from '@/components/userListItem';
import Search from '@/components/search';
import CustomDialog from '@/components/customDialog';

export default {
  name: 'addressBook',
  data(){
    return {
      showDialog: false,
      service: null,
      friendType: 'all',
      tabs: [
        {
          route: '/contact',
          label: '通讯录好友管理',
          name: 'contact'
        }
      ],
      friends: [],
      searchWord: '',
      labelSearchWord: '',
      tableData: []
    }
  },
  mounted() {
    for(let i=0; i<400; i++) {
      this.friends.push({
        wxid: Math.random().toString(16).slice(2),
        name: '用户'+i,
        avatar: '',
        stranger: i % 60 == 0 ? true : false,
        blacklist: i % 100 == 0 ? true : false,
        isVip: i % 50 == 0 ? true : false,
        unreadMessageCount: 0,
        always_top: false,
        decline: false,
        labels: i % 50 == 0 ? ['VIP', '重要客户'] : ['test']
      })
      this.tableData.push({
        name: '张三'+i,
        phone: '13588888888'
      })
    }
  },
  components: {
    HeaderTabs,
    ChooseServiceAccount,
    UserListItem,
    CustomDialog,
    Search
  },
  methods: {
    openDialog() {
      this.showDialog = true
    },
    serviceChange(services) {
      this.service = services[0]
    },
    chooseService(services) {
      this.service = services
    },
    changeFriendType(e) {
      this.friendType = e.target.value
    },
    search(val) {
      this.searchWord = val
    },
    searchLabel(val) {
      this.labelSearchWord = val
    },
    addFriend(user) {

    },
    deleteFriend(user) {

    },
    blacklist(user) {

    },
    multiUpload(e) {

    },
    uploadAddressBook(e) {

    },
    confirmImport() {

    },
  },
  computed: {
    fliteredFriends() {
      let friends = []
      if (this.friendType == 'all') {
        friends = this.friends
      } else if (this.friendType == 'friend') {
        friends = this.friends.filter(f=>!f.stranger&&!f.blacklist)
      } else if (this.friendType == 'stranger') {
        friends = this.friends.filter(f=>f.stranger)
      } else {
        friends = this.friends.filter(f=>f.blacklist && !f.stranger)
      }
      if (this.searchWord != '') {
        friends = friends.filter(f=>f.name.indexOf(this.searchWord)>-1)
      }
      if (this.labelSearchWord != '') {
        friends = friends.filter(f=>f.labels.indexOf(this.labelSearchWord)>-1)
      }
      return friends
    }
  }
}
</script>
